<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"></script>
    <title>设置驾车路线途经点</title>
</head>

<body>
    <div id="allmap"></div>
</body>

</html>
<script type="text/javascript">
    var cont = [

    ]
    var mood = []
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(106.61044945794814, 29.55090312415411), 8);
    map.enableScrollWheelZoom(true);


    function showPoly(pointList) {
        //循环显示点对象
        for (c = 0; c < pointList.length; c++) {
            var marker = new BMap.Marker(pointList[c]);
            map.addOverlay(marker);
            //将途经点按顺序添加到地图上
            let number = c
            var label
            if(number==0){
                 label = new BMap.Label('发货地:'+ cont[c].addressName, { offset: new BMap.Size(20, -10) });
            }else{
                 label = new BMap.Label('目的地' + number + ':' + cont[c].addressName, { offset: new BMap.Size(20, -10) });
            }
            marker.setLabel(label);
        }

        var group = Math.floor(pointList.length / 11);
        var mode = pointList.length % 11;

        var driving = new BMap.DrivingRoute(map, {
            onSearchComplete: function (results) {
                if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
                    var plan = driving.getResults().getPlan(0);
                    var num = plan.getNumRoutes();
                    for (var j = 0; j < num; j++) {
                        var pts = plan.getRoute(j).getPath();    //通过驾车实例，获得一系列点的数组
                        var polyline = new BMap.Polyline(pts);
                        map.addOverlay(polyline);
                    }
                }
            }
        });
        for (var i = 0; i < group; i++) {
            var waypoints = pointList.slice(i * 11 + 1, (i + 1) * 11);
            //注意这里的终点如果是11的倍数的时候，数组可是取不到最后一位的，所以要注意终点-1喔。感谢song141的提醒，怪我太粗心大意了~
            driving.search(pointList[i * 11], pointList[(i + 1) * 11 - 1], { waypoints: waypoints });//waypoints表示途经点
        }
        if (mode != 0) {
            var waypoints = pointList.slice(group * 11, pointList.length - 1);//多出的一段单独进行search
            driving.search(pointList[group * 11], pointList[pointList.length - 1], { waypoints: waypoints });
        }

    }

    function ToManualRoamFunc(e, a) {
        cont = e
        // console.log(cont)
        map.centerAndZoom(new BMap.Point(cont[0].lng,cont[0].lat), 12);
        var arrayList = [];
        cont.forEach(item=>{
            arrayList.push(new BMap.Point(item.lng,item.lat))
        })
        showPoly(arrayList);
    }

   
    function cacel(st, ed) {
        var map = new BMap.Map("container");
        var pointA = new BMap.Point(st.lng, st.lat); // 创建点坐标A
        var pointB = new BMap.Point(ed.lng, ed.lat); // 创建点坐标B
        var range = map.getDistance(pointA, pointB).toFixed(2); //获取两点距离,保留小数点后两位
        range = (range / 1000).toFixed(2)
        return range * 1
    }
    function sortBy(attr, rev) {
        if (rev == undefined) {
            rev = 1
        } else {
            (rev) ? 1 : -1;
        }
        return function (a, b) {
            a = a[attr];
            b = b[attr];
            if (a < b) {
                return rev * -1
            }
            if (a > b) {
                return rev * 1
            }
            return 0;
        }
    }

    //显示轨迹





</script>